<template>
	<div class="mian" :style="props.style">
		<div ref="chartDom" class="chart" style="width: 100%; height: 100%"></div>
		<el-popover placement="top-start" :title="t('pages.Indicator_Description')" :width="300" trigger="hover">
			<template #reference>
				<div class="sm-wrap-s1">
					<img class="img" src="/@/assets/iconRC/wh.svg" alt="" sizes="" srcset="" />
					<span>{{ t('pages.Indicator_Description') }}</span>
				</div>
			</template>
			<div>
				创新力综合评分：评分为百分制，维度共3个：创新活力、创新能力、创新转化力。每个维度由多个次级指标构成
			</div>
		</el-popover>
	</div>
</template>

<script setup lang="ts" name="account">
import * as echarts from 'echarts';
import { getTalentEvaluateIndicator } from '/@/api/cx/list';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const props = defineProps({
	// 数据
	talentId: {
		type: [Number, String],
	},
	// 样式
	style: {
		type: String,
		default: 'width: 100%;height: 400px;',
	},
});
const chartDom = ref();
let myChart = null;

// 数据
const state =reactive<any>({
	dataname:[],
	datavaule:[]
})

function mapInit() {
	myChart = echarts.init(chartDom.value);
	var dataname = state.dataname;
	var datamax = [100, 100, 100];
	var datavaule = state.datavaule;
	var datavalueNum = 0;
	for (var i = 0; i < datavaule.length; i++) {
		datavalueNum += datavaule[i];
	}
	var age = datavalueNum / datavaule.length;
	age = age.toFixed(1);
	console.log(age, 999999999999);
	var indicator = [];
	for (var i = 0; i < dataname.length; i++) {
		indicator.push({
			name: dataname[i],
			max: datamax[i],
		});
	}
	function contains(arrays, obj) {
		var i = arrays.length;
		while (i--) {
			if (arrays[i] === obj) {
				return i;
			}
		}
		return false;
	}

	const option = {
		tooltip: {
			show: false,
		},
		radar: {
			center: ['50%', '55%'],
			radius: '50%',
			//startAngle: 240,
			splitNumber: 5,
			splitArea: {
				areaStyle: {
					color: [
						'rgba(0,96,208, 0.1)',
						'rgba(0,96,208, 0.2)',
						'rgba(0,96,208, 0.3)',
						'rgba(0,96,208, 0.4)',
						'rgba(0,96,208, 0.5)',
						'rgba(0,96,208, 0.6)',
					].reverse(),
				},
			},
			axisLabel: {
				show: false,
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: 'transparent',
				},
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'transparent',
				},
			},
			name: {
				formatter: function (value) {
					var i = contains(dataname, value);
					var percent = datavaule[i];
					var ret = ''; //拼接加\n返回的类目项
					var maxLength = 6; //每项显示文字个数
					var valLength = value.length; //X轴类目项的文字个数
					var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
					if (rowN > 1) {
						//如果类目项的文字大于6,
						var temp = ''; //每次截取的字符串
						var start = 0; //开始截取的位置
						var end = maxLength; //结束截取的位置
						temp = value.substring(start, end) + '\n' + value.substring(end, valLength);
						ret += temp; //凭借最终的字符串
						return '{' + percent + '分' + '}\n' + '{b|' + ret + '}';
					} else {
						return '{a|' + percent + '分' + '}\n' + '{b|' + value + '}';
					}
				},
				textStyle: {
					rich: {
						a: {
							color: 'black',
							fontSize: 12,
							padding: [0, 0, 10, 0],
							lineHeight: 30,
						},
						b: {
							color: 'black',
							fontSize: 16,
							padding: [0, 0, 10, 0],
							lineHeight: 0,
						},
					},
				},
			},
			indicator: indicator,
		},

		series: [
			{
				type: 'radar',
				symbol: 'circle',
				symbolSize: 7,
				areaStyle: {
					normal: {
						color: 'rgba(0,96,208, 0.6)',
					},
				},
				label: {
					show: true,
				},
				itemStyle: {
					color: '#84E1FF',
					borderColor: '#00A7FE',
					borderWidth: 1,
				},
				lineStyle: {
					normal: {
						color: '#00A7FE',
						width: 2,
					},
				},
				data: [datavaule],
			},
		],
	};

	option && myChart.setOption(option);
}
onMounted(() => {
	let param = {
		talentId:props.talentId
	}
	getTalentEvaluateIndicator(param).then(res=>{
		if(res.code == 0){
			let dataname = []
			let datavaule = []
			for (const item of res.data) {
				dataname.push(item.name)
				datavaule.push(item.value)
			}
			state.dataname = dataname
			state.datavaule = datavaule
			mapInit();
		}
	})
	
});
</script>

<style lang="scss" scoped>
.mian {
	position: relative;
	.sm-wrap-s1 {
		display: flex;
		align-items: center;
		position: absolute;
		top: 20px;
		right: 0;
		z-index: 10;
		.img {
			margin-right: 10px;
			width: 18px;
		}
		span {
			font-size: 14px;
		}
	}
}
</style>
